<template>
	<view>
		<view class="flex space alcenter mb30">
			<view class="flex alcenter">
				<image class="unio2o-store-logo" :src="product.store.logo"></image>
				<view  class="ml20 ft16 text-default">
					{{ product.store.name }}
				</view>
			</view>
			<view class="ft14 text-notice">
				<text>距我</text>
				<text class="text-theme">{{ product.store.distance }}</text>
			</view>
		</view>
		
		<view class="box-shadow pd30 mt20 bg-w box-shadow bdr16 flex">
			<image class="unicard-tuan-img bdr8" mode="aspectFill" :src="product.image"></image>
			<view class="unicard-tuan pl30">
				<view class="ft16 ftw600 text-default text-over">{{product.title}}</view>
				<view class="flex alend space mt30">
					<view>
						<view class="text-notice ft14">单价：<text class="text-line">¥{{product.originalPrice}}</text></view>
						<view class="mt20 unicard-tag-use">{{product.discount}}</view>
					</view>
					<view class="unicard-tuan-look flex center alcenter text-w ftw600 ft14">
						查看详情
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props: {
			// 是否显示店铺信息
			showStore: {
				type: Boolean,
				default: true
			},
			// 商品信息
			product: {
				type: Object,
				default: () => ({
					id: null,
					title: '',
					image: '',
					originalPrice: 0,
					discount: '',
					store: {}
				})
			}
		},
		data(){
			return {
				
			}
		}
	}
</script>

<style>
	.unicard-tag-use{
		background:linear-gradient(90deg,rgba(241,226,201,1) 0%,rgba(243,187,110,1) 100%);
		height: 36rpx;
		font-size: 24rpx;
		line-height: 36rpx;
		text-align: center;
		padding: 0 10rpx;
		border-radius: 8rpx;
		color: #764E18;
	}
	.unicard-tuan-img{
		width: 160rpx;
		height: 160rpx;
	}
	.unicard-tuan{
		width: calc(100% - 160rpx);
	}
	.unicard-tuan-look{
		width:160rpx;
		height:64rpx;
		background:#FF6D00;
		box-shadow:0rpx 8rpx 16rpx 0rpx rgba(255,109,0,0.3);
		border-radius:32rpx;
	}
</style>